<script setup lang="ts">
import MenuView from '@/views/MenuView.vue'
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

<template>
  <div class="container">
    <MenuView class="left"></MenuView>
    <div class="main">
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :key="route.path" :is="Component" />
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.left {
  flex: 0 0 auto;
  white-space: nowrap;
}

.main {
  display: flex;
  flex: 1;
  overflow: auto;
}
</style>
